import React from 'react'
import { Timeline,Statistic, Card, Row, Col,Divider } from 'antd';
import { TeamOutlined, FileTextOutlined,CommentOutlined } from '@ant-design/icons';

let usersNum,articleNum,commentNum,txtNum,imgNum;

let url1 = 'https://www.304cloud.top:4321/getuserlist';
fetch(url1)
.then(res=>res.json())
.then(res=>{
    usersNum = res.data.length
});

let url2 = 'https://www.304cloud.top:4321/getarticlelist';
fetch(url2)
.then(res=>res.json())
.then(res=>{
    articleNum = res.data.length
})

let url3 = 'https://www.304cloud.top:4321/getcommentlist';
fetch(url3)
.then(res=>res.json())
.then(res=>{
    commentNum = res.data.length
})

let url4 = 'https://www.304cloud.top:4321/getsourcetxtlist';
fetch(url4)
.then(res=>res.json())
.then(res=>{
    txtNum = res.data.length
})

let url5 = 'https://www.304cloud.top:4321/getsourceimglist';
fetch(url5)
.then(res=>res.json())
.then(res=>{
    imgNum = res.data.length
})

const Home = () => {
    return (
        <div>
           <Divider orientation="left">数据展示</Divider>
            <Row gutter={35}>
                <Col span={4}>
                    <Card>
                    <Statistic
                        title="用户数量"
                        value={usersNum}
                        precision={0}
                        valueStyle={{ color: '#93B5CF' }}
                        prefix={<TeamOutlined />}
                    />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card>
                    <Statistic
                        title="作品数量"
                        value={articleNum}
                        precision={0}
                        valueStyle={{ color: '#93B5CF' }}
                        prefix={<FileTextOutlined />}
                    />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card>
                    <Statistic
                        title="评论数量"
                        value={commentNum}
                        precision={0}
                        valueStyle={{ color: '#93B5CF' }}
                        prefix={<CommentOutlined />}
                    />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card>
                    <Statistic
                        title="文字素材数量"
                        value={txtNum}
                        precision={0}
                        valueStyle={{ color: '#93B5CF' }}
                        prefix={<CommentOutlined />}
                    />
                    </Card>
                </Col>
                <Col span={4}>
                    <Card>
                    <Statistic
                        title="图片素材数量"
                        value={imgNum}
                        precision={0}
                        valueStyle={{ color: '#93B5CF' }}
                        prefix={<CommentOutlined />}
                    />
                    </Card>
                </Col>
                </Row>
                <Divider orientation="left">初探星辰</Divider>
                <Timeline>
                <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
                <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
                <Timeline.Item color="gray">
                <p>Technical testing 1</p>
                <p>Technical testing 2</p>
                <p>Technical testing 3 2015-09-01</p>
                </Timeline.Item>
            </Timeline>
        </div>
    )
}

export default Home
